<template>
  <div class="VipPrice">
    <el-dialog
      :before-close="handelClose"
      :modal="false"
      :visible.sync="visible"
      width="900px"
      title="编辑vip价格"
      @close="handelClose"
    >
      <div class="ele-table">
        <el-table
          :data="levelList"
          border
          style="width: 100%"
        >
          <el-table-column label="等级" prop="vipLevelName" />
          <el-table-column label="等级名称" prop="vipName" />
          <el-table-column label="数量" prop="number">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.number"
                style="width: 100%"
                :min="0"
                :max="100000"
                :controls="false"
                :precision="0"
                placeholder="单位元"
              />
            </template>
          </el-table-column>
          <el-table-column label="会员价格" prop="price">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.price"
                style="width: 100%"
                :min="0"
                :max="100000"
                :controls="false"
                :precision="2"
                placeholder="单位元"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="ele-footer">
        <el-button type="primary" style="margin-top: 20px;" @click="submitVIPPrice">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: { type: Boolean, default: false },
    index: { type: Number, required: true }
  },
  data() {
    return {
      levelList: []
    }
  },
  watch: {
    visible(newValue, oldValue) {
      // this.dialogShow = newValue
    }
  },

  methods: {
    setLevelList(data) {
      this.levelList = data
    },
    handelClose() {
      this.$emit('handelClose')
    },
    submitVIPPrice() {
      this.$emit('handelLevelList', this.levelList)
      this.handelClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.Goods {
  ::v-deep.el-dialog {
    .el-dialog__body {
      padding-bottom: 0;
    }
    .cus-data {
      display: flex;
      .left {
        width: 150px;
        height: 150px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex-grow: 1;
        .form-last-item-0 {
          margin-top: -20px;
          p {
            margin: 0;
          }
        }
        .form-last-item-1 {
          margin-top: 50px;
          .el-button {
            width: 200px;
          }
        }
      }
    }
    // 添加商品的style
    .def-b {
      border-left: 4px solid rgb(55, 131, 255);
      padding-left: 10px;
    }
    .ele-key-search {
      display: flex;
      justify-content: space-between;
      .el-select {
        width: 120px;
      }
      .left {
        .goodsType {
          margin-left: 15px;
        }
      }
      .left,
      .right {
        display: flex;
        justify-content: flex-start;
      }
    }
    .ele-table {
      margin-top: 40px;
      .column-commodity {
        display: flex;
        align-items: flex-start;
        div:first-child {
          width: 60px;
          height: 60px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        div:last-child {
          span {
            margin-left: 20px;
          }
        }
      }
    }
    .ele-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 30px 0px;
      .left {
        .el-button {
          width: 100px;
        }
      }
    }
  }
}
</style>
